<!--
* @Author: GaoXu
* @Date: 2024/7/18 20:51
* @Description:   告警等级图表
-->
<template>
  <div ref="warnLevelChart" class="warn-level-chart"></div>
</template>

<script setup lang="ts">
  import { nextTick, ref, watch } from 'vue';
  import * as echarts from 'echarts';
  import { fontSize } from '/@/utils/echartsRem';
  import { warnLevelStatistic } from '/@/api/remoteOverview/api-remoteOverview';
  import { defHttp } from '/@/utils/http/axios';

  const props = defineProps({
    // 作业面id
    workAreaId: {
      type: String,
      default: '',
    },
    // 站场id
    stationId: {
      type: String,
      default: '',
    },
    // 页面类型【全部, PLC, 网络设备】
    activeKey: {
      type: String,
      default: '',
    },
    // 时间范围
    dateRange: {
      type: Array,
      default: () => [],
    },
  });
  // 监听作业面
  watch(
    () => props.workAreaId,
    (value) => {
      nextTick(() => {
        init();
      });
    },
    {
      immediate: true,
    },
  );
  // 监听站场
  watch(
    () => props.stationId,
    (value) => {
      nextTick(() => {
        init();
      });
    },
    {
      immediate: true,
    },
  );
  // 监听页面类型
  watch(
    () => props.activeKey,
    (value) => {
      if (value) {
        nextTick(() => {
          init();
        });
      }
    },
  );
  // 监听周期类型
  watch(
    () => props.dateRange,
    (value) => {
      if (value.length > 0) {
        nextTick(() => {
          init();
        });
      }
    },
    {
      immediate: true,
    },
  );
  const warnLevelChart = ref();
  let option = {};
  let data = [
    {
      name: '紧急',
      value: 25,
    },
    {
      name: '重要',
      value: 22,
    },
    {
      name: '一般',
      value: 19,
    },
    {
      name: '普通',
      value: 28,
    },
  ];
  function setOptionData() {
    const colorList = [
      'rgba(255, 100, 148, 1)',
      '',
      'rgba(252, 169, 137, 1)',
      '',
      'rgba(243, 255, 143, 1)',
      '',
      'rgba(143, 255, 196, 1)',
      '',
      '#35FFC9',
      '',
      '#004DFC',
      '',
    ];

    const sum = data.reduce((per, cur) => per + cur.value, 0);

    const data1 = [];

    const gapData = {
      name: '',
      value: 0.3,
      itemStyle: {
        color: '#032359',
      },
    };

    for (let i = 0; i < data.length; i++) {
      // 第一圈数据
      data1.push({
        ...data[i],
      });
      data1.push(gapData);
    }

    option = {
      legend: {
        show: true,
        orient: 'horizontal',
        right: '5%',
        top: '17%',
        itemGap: fontSize(17),
        itemHeight: fontSize(9),
        itemWidth: fontSize(20),
        textStyle: {
          rich: {
            name: {
              color: 'rgba(203, 226, 255, 1)',
              fontSize: fontSize(14),
              padding: [0, fontSize(35), 0, fontSize(10)],
              fontFamily: 'AlibabaPuHuiTi-2-55-Regular',
            },
            value: {
              color: 'rgba(228, 242, 255, 1)',
              fontSize: fontSize(14),
              fontFamily: 'AlibabaPuHuiTi-2-55-Regular',
            },
          },
        },
        formatter: (name) => {
          let obj = {};
          if (name) {
            obj = data.find((item) => item.name === name);
          }
          return `{name|${name}}{value|${obj.value || 0}}`;
        },
      },
      title: {
        text: sum,
        left: '38%',
        top: '35%',
        itemGap: 8,
        textStyle: {
          width: fontSize(100),
          color: '#E4F2FF',
          align: 'center',
          fontSize: fontSize(36),
          fontStyle: 'italic',
        },
        subtext: '共计',
        subtextStyle: {
          width: fontSize(100),
          align: 'center',
          color: '#E4F2FF',
          fontSize: fontSize(14),
        },
        textAlign: 'center',
      },
      tooltip: {
        trigger: 'item',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter(params) {
          if (params.data.name) {
            return `${params.name + ':' + params.data.value}`;
          }
        },
        textStyle: {
          fontSize: fontSize(14),
          color: 'rgba(226, 235, 250, 1)',
        },
        borderColor: 'rgba(6,17,45,0.8)',
        backgroundColor: 'rgba(6,17,45,0.8)',
      },
      // 图例根据第一个数据进行渲染的颜色
      series: [
        // 外圈
        {
          type: 'pie',
          radius: ['68%', '92%'],
          center: ['40%', '50%'],
          hoverAnimation: false,
          minAngle: 6,  // 可控制Gap 宽度
          emphasis: { scale: false },
          label: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex];
              },
            },
          },
          data: data1,
          z: 10,
        },
        // 内圈
        {
          type: 'pie',
          radius: ['68%', '82%'],
          center: ['40%', '50%'],
          hoverAnimation: false,
          minAngle: 6,
          labelLine: {
            show: false,
          },
          label: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: 'rgba(5, 25, 74, 0.7)',
            },
          },
          data: data1,
          z: 15,
        },
        // 底层圈
        {
          type: 'pie',
          radius: ['68%', '98%'],
          center: ['40%', '50%'],
          hoverAnimation: false,
          emphasis: { scale: false },
          label: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: 'rgba(5, 25, 74, 0.7)',
            },
          },
          data: data1,
          z: 1,
        },
      ],
    };
  }
  /** 图表初始化 */
  function init() {
    defHttp
      .get({
        url: warnLevelStatistic,
        params: {
          stationId:props.stationId,
          workAreaId: props.workAreaId,
          equipType: props.activeKey,
          beginTime: props.dateRange[0],
          endTime: props.dateRange[1],
        },
      })
      .then((res) => {
        if (res) {
          res.forEach((item, index) => {
            data[index].value = item.num;
          });
          setOptionData();
          let chart = echarts.init(warnLevelChart.value);
          chart.setOption(option);
          const resizeObserver = new ResizeObserver(() => {
            chart.resize();
          });
          resizeObserver.observe(warnLevelChart.value);
        }
      });
  }
</script>
<style scoped lang="less">
  .warn-level-chart {
    // width: calc(100% - 140px);
    // height: calc(100% - 80px);
    width: 100%;
    height: 100%;
  }
</style>
